<template>
    <div class="video">
        <b-container>
            <b-row class="inner">
                <video :src="info.content" controls="controls" :poster="info.coverImage" id="video">
                    您的浏览器不支持 video 标签。
                </video>
                <span class="off-btn" @click="pauseVideo"><img src="../images/close.png"></span>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import { GetLists } from '@/api'
import { filterLocaleType } from '@/utils'
export default {
	name: 'Video',
	data () {
		return {
            lanType: 2,
			info: {}
		}
    },
    watch:{
        '$i18n.locale'(n, o) {
            this.reset(n)
        },
    },
    mounted(){
        var Media = document.getElementById("video");
		this.reset()
	},
	methods:{
        reset(n){
            var local = n || this.$i18n.locale
            this.lanType = filterLocaleType(local)
            if( this.lanType == 2 || this.lanType == 3 ){
                this.lanType = 1
            }
			this.fetchData()
        },
        fetchData(){
			GetLists({
				categoryId: 3,
				lanType: this.lanType,
				page:1,
				size:1
			}).then((res)=>{
				this.info = res.dataList[0]
			})
		},
		pauseVideo(){
			var Media = document.getElementById("video");
            Media.pause();
            this.$emit('hideVideo')
		}
	}
}
</script>

<style lang="scss" scoped>
.video{
	position: fixed;
    top: 150px;
    left: 0;
    right: 0;
    z-index: 100;
    .inner{
        position: relative;
        video{
            width: 100%;
            height: 100%;
            object-fit: fill;
            display: block;
        }
        .off-btn{
            width: 22px;
            height: 22px;
            display: inline-block;
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}
</style>